<script type="text/javascript">

	var MyOrigin = "{{=origin}}";
	var MyDestination = "{{=destination}}";

	var directionsService = new google.maps.DirectionsService();

	var DirectionsRendererOptions = {
		draggable: true,
	};
	var directionsDisplay = new google.maps.DirectionsRenderer(DirectionsRendererOptions);

	function initialize() {
		var mtv = new google.maps.LatLng(37.4, -122.05);
		map = new google.maps.Map(document.getElementById('map_canvas2'), {
			center : mtv,
			zoom : 12,
			mapTypeId : 'roadmap'
		});

		directionsDisplay.setMap(map);
		directionsDisplay.setPanel(document.getElementById("directions_panel"));
	}

	function showDirections() {
		var request = {
			origin: MyOrigin,
			destination: MyDestination,
			travelMode: google.maps.TravelMode.DRIVING,
			unitSystem: google.maps.UnitSystem.METRIC
		};

		directionsService.route(request,function(result, status) {
			if (status == google.maps.DirectionsStatus.OK){
				directionsDisplay.setDirections(result);
			}
		});
	}
</script>

<div id="container" style="width:100%;height:100%;">
	<div id="map_canvas2" style="width:75%;height:100%;float:right"></div>
	<div id="directions_panel" style="width:25%;height:100%;float:right"></div>
</div>

<script type="text/javascript">
	initialize()
	showDirections()
</script>